<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="homepage2.css">


</head>
<body>
    <!-- 头部导航 -->
    <div class="full_header">
        <div class="full_content">
            <div  class="header_logo">
                <img class="logo_img" src="http://tpl-cbffb23.pic38.websiteonline.cn/upload/logo_03_32ht.png" alt="header_logo">
            </div>

            <div class="header_title">
                <span style="font-size: 30px; color: rgb(255,255,255); font-family:微软雅黑 ;">
                    <strong>某某美容护肤</strong>
                </span>
            </div>

            <div class="header_title_english">
                <span style="font-size: 13px; color: rgb(90, 90, 90);text-transform: uppercase; font-family:微软雅黑;">XX BEAUTY AND SKIN CARE</span>
            </div>

            <div class="header_navigation">
                <ul style="width: auto;" type="none">
                    <li style="width: 115px;">
                        <a href="https://www.baidu.com/">网站首页</a>
                    </li>
                    <li style="width: 115px;">
                        <a href="https://www.baidu.com/">关于我们</a>
                    </li>
                    <li style="width: 115px;">
                        <a href="https://www.baidu.com/">产品中心</a>
                    </li>
                    <li style="width: 115px;">
                        <a href="https://www.baidu.com/">新闻资讯</a>
                    </li>
                    <li style="width: 115px;">
                        <a href="https://www.baidu.com/">联系我们</a>
                    </li>
                    <li style="width: 115px;">
                        <a href="https://www.baidu.com/">在线留言</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 轮播图 -->
    <div id="wrap">
        <div class="img-list">
            <img src="http://tpl-cbffb23.pic38.websiteonline.cn/upload/3.jpg">
            <img src="http://tpl-cbffb23.pic38.websiteonline.cn/upload/2.jpg">
        </div>

        <div class="arrow">
            <a href="javascript:;" class="left">
                <img id="img01" src="http://beauty-299.view.websiteonline.cn/template/default/images/left_arrow.png" >
            </a>
            <a href="javascript:;" class="right">
                <img id="img02" src="http://beauty-299.view.websiteonline.cn/template/default/images/right_arrow.png">
            </a>
        </div>

        <ul class="circle-list">
            <li class="circle active" data-n="0"></li>
            <li class="circle" data-n="1"></li>
        </ul>
    </div>

    <!-- 轮播图中心区 -->
    <div class="wrap_center">
        <div class="wrap_center_content">

            <div class="wrap_center_content_Etitle">
                <span style="font-size: 28px; text-transform: uppercase; color: rgb(67, 67, 67);">Wake me up and set out</span>
            </div>

            <div class="wrap_center_content_Ctitle">
                <span style="font-size: 46px; color:rgb(158,2,86) ;">
                    <strong>唤醒美肌  盛装出发</strong>
                </span>
            </div>

            <div class="wrap_center_content_product">
                <a href="#">查看产品</a>
            </div>
        </div>
    </div>






    <script>
        // 左右切换按钮
        var oLeft = document.querySelector(".left");
        var oRight = document.querySelector(".right");
        var oImgList = document.querySelector(".img-list");

        var clonefirstImg = oImgList.firstElementChild.cloneNode();
        oImgList.appendChild(clonefirstImg);
        
        let index = 0;

        var lock = true;
        function handleRightBtn(){
            if(!lock) return;
            index++;
            oImgList.style.left = index * -1440 + "px";
            oImgList.style.transition = "0.5s ease"
            if(index === 2){
                index = 0;
                setTimeout(() =>{
                    oImgList.style.left = 0;
                    oImgList.style.transition = "none";
                },500);
            }
            setCircles();

            lock = false;
            setTimeout(() => {
                lock = true;
            },500)
        }

        oRight.addEventListener("click",handleRightBtn);

        lock = true;
        oLeft.addEventListener("click",() => {
            if(!lock) return;
            index--;
            if (index === -1){
                oImgList.style.left = 2 * -1440 + "px";
                oImgList.style.transition = "none";
                index = 1;
                setTimeout(() => {
                    oImgList.style.left = index * -1440 + "px";
                    oImgList.style.transition = "0.5s ease";
                },0);
            }else{
                oImgList.style.left = index * -1440 + "px" ;
            }
            setCircles();
            lock = false;
            setTimeout(() => {
                lock = true;
            },500)
        });

        // 小圆点切换
        var circles = document.querySelectorAll(".circle");
        
        function setCircles() {
            for ( let i = 0; i < circles.length; i++) {
                if (i === index){
                    circles[i].classList.add("active");
                }else{
                    circles[i].classList.remove( "active" );
                }
            }
        }

        var oCircle = document.querySelector( ".circle-list");
        oCircle.addEventListener( "click",(e) => {
            if (e.target.nodeName.toLowerCase() === "li"){
                var n = Number(e.target.getAttribute("data-n"));
                index = n;
                setCircles();
                oImgList.style.left = index * -1440 + "px";
            }
        });

        var autoplay = setInterval(handleRightBtn,2000);
        var oWrap = document.getElementById("wrap");

        oWrap.addEventListener("mouseenter",() => {
            clearInterval(autoplay);
        });
        oWrap.addEventListener("mouseleave",() => {
            clearInterval(autoplay);
            autoplay = setInterval(handleRightBtn,3000);
        });

    </script>
    
</body>
</html>